<%--
  主页面
  Created by IntelliJ IDEA.
  User: admin
  Date: 2016/7/3
  Time: 11:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--公共声明的引用 begin-->
<%@ include file="/page/base/declare.jsp"%>
<!--公共声明的引用 end-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--公共头文件的引入 begin-->
    <%@include file="/page/base/head.jsp"%>
    <!--public css import begin-->
    <link href="/static/css/base/common.base.css" rel="stylesheet">
    <!--public css import end-->
    <!--public js import begin-->
    <script src="/static/js/base/common.base.js"></script>
    <!--public js import end-->
    <!--公共头文件的引入 end-->
    <style>
        select{
            width: 178px;
        }
        .p_content{
            margin: 200px auto 500px;
            text-align: center;
            color: darkgray;
            font-weight: bolder;
            font-size: 50px;
        }
    </style>
</head>
<body>
<!--导航栏引入 begin-->
<%@include file="/page/base/navigation.jsp"%>
<!--导航栏引入 end-->
<div class="ch-container">
    <div class="row">
        <!--left menu begin-->
        <%@include file="../base/left.jsp"%>
        <!--left menu end-->

        <div id="content" class="col-lg-10 col-sm-10">
            <%@include file="../base/breadcrumb.jsp"%>
            <!-- content starts -->
            <div class="box col-md-12">
                <div class="row">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-user"></i><one:menuTag url="${req_uri}"></one:menuTag></h2>

                                <div class="box-icon">
                                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                                            class="glyphicon glyphicon-chevron-up"></i></a>
                                    <a href="#" class="btn btn-close btn-round btn-default"><i
                                            class="glyphicon glyphicon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <a id="addSource" class="btn btn-default" href="#"  data-toggle="modal" data-target="#addAdmin">
                                    <i class="glyphicon glyphicon-plus icon-white"></i>
                                    添加
                                </a>
                            </div>
                            <div class="box-content">
                                <table class="table table-striped table-bordered responsive">
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>姓名</th>
                                        <th>拥有角色</th>
                                        <th>创建人</th>
                                        <th>创建时间</th>
                                        <th>描述</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${page.result}" var="item">
                                        <tr>
                                            <td>${item.id}</td>
                                            <td>${item.name}</td>
                                            <td>
                                                <c:if test="${empty item.roleIds}">无</c:if>
                                                <c:if test="${!empty item.roleIds}">
                                                    ${item.roleNames}
                                                </c:if>
                                            </td>
                                            <td>${item.adminName}</td>
                                            <td class="center"><fmt:formatDate value="${item.createTime}" pattern="yyyy/MM/dd HH:mm:ss"></fmt:formatDate></td>
                                            <td>${item.desc}</td>
                                            <td class="center">
                                                <a class="btn btn-success" href="#">
                                                    <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                                                    View
                                                </a>
                                                <a class="btn btn-info" href="#" onclick="assignRole(${item.id})">
                                                    <i class="glyphicon glyphicon-edit icon-white"></i>
                                                    分配角色
                                                </a>
                                                <a class="btn btn-danger" href="#" onclick="deleteResource(${item.id})">
                                                    <i class="glyphicon glyphicon-trash icon-white"></i>
                                                    删除
                                                </a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                                <one:pageTag page="${page}" href="/auth/admin_manager.htm"></one:pageTag>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- content ends -->
        </div>
    </div><!--/fluid-row-->
    <%@include file="../base/footer.jsp"%>
</div>
<!--页脚引用 begin-->
<!--添加管理员模态框-->
<div class="modal fade" id="addAdmin" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加管理员 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></h3>
            </div>
            <br>
            <form id="addAdminForm" action="">
                <div class="form-group center">
                    <label class="control-label">姓名：</label>
                    <input type="text" class="form-field" name="name">
                </div>
                <div class="form-group center">
                    <label class="control-label">密码：</label>
                    <input type="text" class="form-field" name="password">
                </div>
                <div class="form-group center">
                    <label class="control-label">描述：</label>
                    <input type="text" class="form-field" name="desc">
                </div>
            </form>
            <div class="modal-footer center">
                <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a>
                <a href="#" class="btn btn-primary" onclick="addAdmin()">保存</a>
            </div>
        </div>
    </div>
</div>

<!--分配角色模态框-->
<div class="modal fade" id="assignRole" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>分配角色 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></h3>
            </div>
            <form id="assignRoleForm" style="margin-left: 100px" action="">
            </form>
            <div class="modal-footer center">
                <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a>
                <a href="#" class="btn btn-primary" onclick="commitAssignRole()">保存</a>
            </div>
            <!--遮罩层，防止多次点击-->
            <div class="mask_control hide">
                <img src="/static/img/ajax-loaders/loading.gif">
            </div>
        </div>

    </div>
</div>

<!--页脚引用 end-->
</body>
<script>
    //添加管理员
    function addAdmin() {
        $.ajax({
            url:"/auth/add_admin.json",
            data:$("#addAdminForm").serialize(),
            contentType:"json",
            success:function(data) {
                alert("添加成功！");
                window.location.reload();
            }
        });
    }

    //分配角色
    function assignRole(adminId) {
        modalOnLoad($("#assignRole"));
        $.ajax({
            url:"/auth/get_all_roles.json?adminId=" + adminId,
            contentType:"json",
            success:function(data) {
                var roles = data.roles;
                var form = $("#assignRoleForm");
                form.children().remove(); //移除子元素，防止重复点击
                for(var i = 0; i < roles.length; i ++) {
                    if(roles[i].checked == true) {
                        form.append("<div class='checkbox'> <label><input name='roleIds' type='checkbox' checked='checked' value='" + roles[i].id + "'>" + roles[i].name +"</label> </div>");
                    }else {
                        form.append("<div class='checkbox'> <label><input name='roleIds' type='checkbox' value='" + roles[i].id + "'>" + roles[i].name +"</label> </div>");
                    }

                }
                //添加管理id
                form.append("<input name='adminId' style='display:none' value='"+ adminId +"'>");
                modalRemoveLoad($("#assignRole"));
                $("#assignRole").modal();
            }
        });
    }

    //提交分配的角色
    function commitAssignRole() {
        var mask = $("#assignRole").find(".mask_control");
        mask.removeClass("hide");
        $.ajax({
            url:"/auth/assign_roles.json",
            data: $("#assignRoleForm").serialize(),
            contentType:"json",
            success:function(data) {
                alert("分配成功！");
                $("#assignRole").modal("hide");
                $("#assignRole").find(".mask_control").hide();
            }
        });
    }
</script>
<script src="../../static/js/base/base.public.js"></script>
</html>
